<!DOCTYPE html>
<html>
    <head>
        <title>Bui 框架 富文本编辑器 SSM框架开发</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
        <meta name="description" content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="bookmark" href="/favicon.ico" />
        <meta name="renderer" content="webkit|ie-stand" />
        <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
        <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/toolbar.css" />
        <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/panel.css" />
        <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />        
        <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
        <script type="text/javascript" src="../javascript/toolbar-2.0.0.js"></script>
        <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
        <script type="text/javascript" src="../javascript/panel-2.0.0.js"></script>
        <script type="text/javascript" src="lang_config.js"></script>
    <style>
        body {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .section-body h2 {
            margin-top: 12px;
        }
    </style>
</head> 

<body>
    <div style="width:100%;margin:0 auto; ">
        <div>
            <input id="diybtn" type="button" class="button-xls" value="自定义按钮" onclick="windowbtn()" />
            <input id="top_show" type="button" class="button-xls" value="打开顶部提示窗口" onclick="window6('top')" />
            <input id="bottom_show" type="button" class="button-xls" value="打开右下角提示窗口" onclick="window6('bottom')" />
            <input type="button" class="button-edit" value="打开信息窗口" onclick="window3()" />
            <input type="button" class="button-add" value="打开静态内容窗口" onclick="window0()" />
            <input type="button" class="button-add" value="打开远程内容窗口" onclick="window1()" />
            <input type="button" class="button-delete" value="打开确认窗口" onclick="window2()" />
           
            <input type="button" class="button-xls" value="打开错误窗口" onclick="window4()" />
           
            <input type="button" class="button-xls" value="打开警告窗口" onclick="window5()" />
            <input type="button" class="button-xls" id="successBtn" value="打开成功窗口" onclick="windowSuccess()" />
            <input type="button" class="button-xls" value="简约窗口" onclick="window7()" />
            <input type="button" class="button-xls" value="顶部处理提示" onclick="windowReq()" />
            <input type="button" class="button-xls" value="鼠标提示" onclick="minTip(this)" />
            

        </div>
    </div>

    <script type="text/javascript">
        
      
        function windowbtn(){
            $w = $B.window({               
                title:'多按钮窗口',
                content:'<div><p>1.支持 浮动文本，图片，视频设计 的编辑器</p><p>2.输出符合w3c规范的html + css 的编辑器</p><p>3.支持拖拉设计段落边距，视频大小的 编辑器</p><p>4.支持自定义字体图标样式插入的编辑器（可二次开发扩展更多图标）</p><p>5.支持段落左右边距拖动修改</p><p>6.输出符合w3c标准化的html及css样式，跟executeCommand api乱七八糟的修饰说拜拜</p><p>7.目前市面上唯一 一个支持插入/编辑流程图的富文本编辑器</p></div>',
                onClosed:function(){
                    console.log("on closed fire ");
                },
                toolbar:{
                    align:'100%',
                    buttons:[
                        {
                            color: '#0ABF95',
                            text: '按钮1',
                            iconCls: 'fa-ccw-1',
                            click:function(){
                                alert("按钮1按钮1按钮1按钮1");
                            }
                        },
                        {
                            color: '#3B48D8',
                            text: '按钮2',
                            iconCls: 'fa-ok-circled2',
                            click:function(){
                                alert("按钮2按钮2按钮2按钮2");
                            }
                        },{
                            color: '#A721E5',
                            text: '关闭',
                            iconCls: 'fa-cancel',
                            click:function(){
                                $w.close();
                            }
                            
                        }
                    ]
                }
            });
        }

        function minTip(t){
            console.log("mi tip");
            $B.toolTip(t,"这是一个鼠标事件提示这是一个鼠标事件提示这是一个");
        }


        function windowReq(){
            $B.busyTip({
                closeable: true, //是否关闭
                title:'正在处理中，请稍等.....'
            });
        }

        function window7(){
            var $w = $B.window({               
                header:false,
                content:'<div><p>1.支持 浮动文本，图片，视频设计 的编辑器</p><p>2.输出符合w3c规范的html + css 的编辑器</p><p>3.支持拖拉设计段落边距，视频大小的 编辑器</p><p>4.支持自定义字体图标样式插入的编辑器（可二次开发扩展更多图标）</p><p>5.支持段落左右边距拖动修改</p><p>6.输出符合w3c标准化的html及css样式，跟executeCommand api乱七八糟的修饰说拜拜</p><p>7.目前市面上唯一 一个支持插入/编辑流程图的富文本编辑器</p></div>',
                onClosed:function(){
                    console.log("on closed fire ");
                }
            });
        }

        console.log("window >>>>>>>>>>>>");
        function window0(){
            var $w = $B.window({               
                title:'这是一个静态内容的window窗口',
                content:'<div><p>1.支持 浮动文本，图片，视频设计 的编辑器</p><p>2.输出符合w3c规范的html + css 的编辑器</p><p>3.支持拖拉设计段落边距，视频大小的 编辑器</p><p>4.支持自定义字体图标样式插入的编辑器（可二次开发扩展更多图标）</p><p>5.支持段落左右边距拖动修改</p><p>6.输出符合w3c标准化的html及css样式，跟executeCommand api乱七八糟的修饰说拜拜</p><p>7.目前市面上唯一 一个支持插入/编辑流程图的富文本编辑器</p></div>',
                onClosed:function(){
                    console.log("on closed fire ");
                }
            });
        }
        function window1(){
            var $w = $B.window({
                size:{width:600,height:300},
                iconCls:'fa-ok-circle',
                iconColor: "#08B779",//图标颜色               
                title:'<span style="color:#B708B2">这是远程请求窗口</span>',
                // url:'test1.html', //fragment.html
                // dataType: 'iframe', //当为url请求时，html/json/iframe
                url:'fragment.html', //fragment.html
                dataType: 'html', //当为url请求时，html/json/iframe
                onClosed:function(){
                    console.log("on closed fire ");
                },
                toolbar:[{
                    color: '#34E0B9',
                    text: '重新加载',
                    iconCls: 'fa-ccw-1',
                    click:function(){
                        $w.reload();
                    }
                },{
                    color: '#C16FF0',
                    text: '关闭',
                    iconCls: 'fa-cancel-circled-1',
                    click:function(){
                        $w.destroy();
                    }
                }]
            });
        }

        function window2(){
            // var $w = $B.confirm({ 
            //     content:"请您确认删除？请您确认删除？",
            //     okFn:function(){//确认回调
            //         console.log("ok ");
            //     }, 
            //     noFn:function(){
            //         console.log("no ");
            //     }
            // });
            $B.confirm('请您确认删除？请您确认删除？请您确认删除？请您确认删除请您确认删除？请您确认删除请您确认删除？请您确认删除请您确认删除？请您确认删除请您确认删除？请您确认删除请您确认删除？请您确认删除',()=>{
                console.log("ok ");
            },()=>{
                console.log("no");
            });
        }


        function window3(){
            // var $w = $B.message({ 
            //     mask:false,
            //     position:'top',
            //     title:'请您确认',
            //     timeout:5,
            //     iconCls:'fa-emo-laugh',
            //     iconColor:'#796203',
            //     toolbar:[{
            //         text:'ok',
            //         click:function(){

            //         }
            //     }],//工具栏，如果传入，则不生成默认的按钮
            //     contentIcon:'fa-chat-empty',
            //     width:300,
            //     content:"这是一个提示信息！这是一个提示信息！这是一个提示信息！这是一个提示信息！这是一个提示信息！这是一个提示信息！这是一个提示信息！这是一个提示信息！"
            // });
            //$B.message("这是一个提示信息",5);
            $B.message({
                title:'<span style="color:#D30ADE">温馨提示</span>',
                mask:false,
                content:'<span style="color:#9D1CF2">请您查收邮件！请您查收邮件！请您查收邮件！</span>',
                timeout:10,
                iconCls:'fa-emo-laugh',
                contentIcon:'fa-mail-alt',
                position:'bottom'
            });
        }

        function window4(){
            // $B.error({
            //     title:'错误提示',
            //     mask:false,
            //     content:'程序出现未知异常！',
            //     timeout:10,                
            //     position:'top'
            // });
            $B.error("这是一个美丽的错误！这是一个美丽的错误！这是一个美丽的错误！这是一个美丽的错误！这是一个美丽的错误！这是一个美丽的错误！这是一个美丽的错误！这是一个美丽的错误！");
        }
        function window5(){
             $B.alert({
                title:'告警提示',
                mask:false,
                content:'这是一个告警信息！！',
                timeout:5
            });
            // $B.alert("这是一个告警信息！");
        }


        function window6(pos){
              $B.success({
                title:'成功提示',
                mask:false,
                width:260,
                content:'数据操作成功！',
                timeout:5,     
                closeable:false,           
                position:pos
            });
        }

        function windowSuccess(){
            //  $B.success({
            //     title:'成功提示',
            //     mask:false,
            //     width:260,
            //     content:'数据操作成功！',
            //     timeout:6,     
            //     closeable:false,           
            //     position:'top'
            // });
            $B.success("数据保存成功！");
        }

        $B.DomUtils.onDomLoaded(function () {
            $B.mouseTip(document.getElementById("top_show"),"生成顶部居中窗口！","bottom");
            $B.mouseTip(document.getElementById("bottom_show"),"生成右下角位置提示窗口！");            
        });

    </script>
</div>
    <a style="position: absolute;bottom: 2px;right:200px" onclick="minTip(this)">底部按钮</a>
</body>
</html> 